<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <album @buy="buy(album)" v-for="album of albums" :alb="album"></album>
        <h3>购物车：</h3>
        <ul>
            <li v-for="item of shoppingCart">
                {{item.title}}===={{item.count}}
            </li>
        </ul>
    </div>

<script>
    let albums=[
        {title:'新长征路上的摇滚',price:28,musics:[{
                name:'一块红布',duration:120
            },{
                name:'最后一枪',duration:180
            }
            ]},

        {title:'解决',price:76,musics:[{
                name:'解决',duration:170
            },{
                name:'好时光',duration:220
            }
            ]}
    ];
    Vue.component('musics',{
        props:{
          mucs:Array
        },
       template: `
            <div>
                <ul>
                <li v-for="m of mucs">
                    {{m.name}}
                </li>
                </ul>
               </div>
       `
    });




    Vue.component('album',{
        props:{
            alb:Object
        },
        methods:{
          buy(album){
              this.$emit('buy',album)
          }
        },
        template:`
            <div><h3>{{alb.title}}---{{alb.price}}</h3>
            <musics :mucs="alb.musics"></musics>
            <button @click="buy(alb)">加入购物车</button>
            </div>
        `
    })

    new Vue({
        el:'#app',data:{albums:albums,shoppingCart: []},
        methods: {
            buy(album){
                this.shoppingCart.push({title:album.title,count:1})
            }
        }
    })


</script>
</body>
</html>